<template>
  <div>
    <el-card class="box-card" v-if="type === 1">
      <exam-list @changeType="type=2"></exam-list>
    </el-card>
    <el-card class="box-card" v-else>
      <div slot="header" class="clearfix">
        <span>创建考试</span>
        <el-button
          style="float: right"
          size="small"
          type="primary"
          plain
          @click="type = 1"
          >返回列表</el-button
        >
      </div>
      <el-form label-position="right" label-width="100px" size="normal">
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="考试名称" size="normal">
              <el-input v-model="formData.exam_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="考试类型" size="normal">
              <el-radio-group v-model="formData.exam_type">
                <el-radio :label="1">阶段测试</el-radio>
                <el-radio :label="2">综合考试</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="锁屏方式" size="normal">
              <el-radio-group v-model="formData.lock_screen">
                <el-radio :label="1">不锁屏</el-radio>
                <el-radio :label="2">锁屏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="归属学科">
              <el-select
                v-model="formData.subject_id"
                placeholder="请选择学科"
                clearable
                @clear="get_list"
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="归属目录">
              <el-select
                v-model="formData.directory_id"
                placeholder="归属目录"
                clearable
                @clear="get_list"
                @change="getId"
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="考试时长">
              <el-input-number
                v-model="formData.exam_time"
                @change="handleChange"
                :min="1"
                :max="60"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="3">
            <el-form-item label="试卷信息">
              <el-select
                v-model="formData.main_paper_id"
                placeholder="选择主考试卷"
                clearable
                @clear="get_list"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.paper_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="3">
            <el-form-item label="    ">
             <el-button type="primary" size="medium" @click="submitForm"
                >立即创建</el-button
              >
              <el-button>取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ExamList from "./component/ExamList.vue";
import {getPaperList,getTreeList,addExamList,} from "@/api/exam/question"
export default {
  components: {
    ExamList,
  },
  data() {
    return {
      type: 1,
      treeList:[],
      list:[],
      formData: {
        directory_id: '',
        exam_name: "",
        exam_time: 30,
        exam_type: 1,
        lock_screen: 1,
        main_paper_id: '',
        subject_id: '',
      },
    };
  },
  methods: {
     async getTreeList() {
      try {
        const res = await getTreeList();
        console.log(res);
        this.treeList = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    async getId() {
      if(this.formData.subject_id && this.formData.directory_id) {
        const res = await getPaperList({
          subject_id:this.formData.subject_id,
          directory_id:this.formData.directory_id
        })
        this.list = res.data.list

      }
    },
    async submitForm() {
     try {
        const res = await addExamList(this.formData)
        this.$message.success('创建考试成功')
     } catch (error) {
       console.log(error);
     }
    }
    
  },
  computed: {
   directoryList() {
      // 目录信息
      if (!this.formData.subject_id) {
        return [];
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.formData.directory_id = "";
        const result = this.treeList.find((val) => {
          return val.id == this.formData.subject_id;
        });
        return result.children;
      }
    },
  },
  created () {
    this.getTreeList()
    this.getId()
  }
};
</script>

<style>
body {
  background-color: #eaedf1;
}
.box-card {
  margin: 20px;
}
.el-card__header {
  padding: 10px 20px;
  font-weight: bold;
  line-height: 32px;
}
</style>
